@import "../param";

$radius: 40px;

.customer-profile-view-mode {
	height: $modal-body-height;
	position: relative;

	.customer-label {
		overflow: hidden;
		position: absolute;
		margin: 5px;
		padding: 0 20px;
		height: 30px;
		line-height: 30px;
		text-align: center;
		border-radius: 10px;
		color: $white;
		font-size: 13px;
	}

	.center-icon {
		width: $radius * 2;
		height: $radius * 2;
		margin: 10px;
		position: absolute;
		top: calc(50% - 40px - 10px); // $radius = 40px, margin = 10px
		left: calc(50% - 40px - 10px); // $radius = 40px, margin = 10px
		border-radius: 50%;
		background-color: #f9f9f9;
		border: 1px solid #d1d1d1;
		text-align: center;

		.center-icon-body {
			color: #97c6e2;
			font-size: 55px;
			line-height: 1;
			margin-top: 10px;
		}

		&.tags-not-found .center-icon-body {
			color: #d1d1d1;
		}

		.center-icon-text {
			font-size: 14px;
			color: $default-font-color;
		}
	}

	.note-container {
		position: absolute;
		top: 26px;
		width: 201px;
		height: calc(100% - 26px * 2);
	}

	.note-container--left {
		left: -100px;

		cc-customer-attribute-note:nth-child(1) .note-header {
			background: $header-background-color-2;
		}

		cc-customer-attribute-note:nth-child(2) .note-header {
			background: $header-background-color-3;
		}
	}

	.note-container--right {
		right: -100px;

		cc-customer-attribute-note:nth-child(1) .note-header {
			background: $header-background-color-1;
		}
	}
}
